/*
 *@description:头部导航
 *@Author:@rennan
 *@Date:2024-07-13 08:29:32
 *@version: V1.0.0
*/

<template>
  <div class="my_header">
    <div class="left">
      <van-icon name="wap-nav" size="22" /> 
    </div>
    <div class="content">
      <div :class="{active:currentTag === 1}" @click="handleClick(1)">我的</div>
      <div :class="{active:currentTag === 2}" @click="handleClick(2)">发现</div>
      <div :class="{active:currentTag === 3}" @click="handleClick(3)">云村</div>
      <div :class="{active:currentTag === 4}" @click="handleClick(4)">视频</div>
    </div>
    <div class="right">
      <van-icon name="search" size="22" />
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import router from '@/router/index.js'

let currentTag = ref(2)
const handleClick = (tag)=>{
  console.log(tag);
  currentTag.value = tag
  router.push({name:tag===1?'mine': tag ===2?'discover': tag===3?'yuncun':'video'})
}

</script>
<style scoped>
.my_header {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0;
}
.my_header .content {
  display: flex;
  width: 180px;
  justify-content: space-around;
}
</style>